<template>
  <div class="fascia_mian">
    <div class="fascia_row">
      <div class="fascia_header">
        <div>
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }"
              >首页</el-breadcrumb-item
            >
            <el-breadcrumb-item :to="{ path: '/exhibition' }"
              >标展</el-breadcrumb-item
            >
            <el-breadcrumb-item>会刊提交</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div>
          <el-button
            type="danger"
            icon="el-icon-plus"
            @click="dialogVisible = true"
            >新增申请</el-button
          >
        </div>
      </div>
      <div class="fascia_table">
        <div class="table_titel">已申请楣板信息</div>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="date" label="展位号"> </el-table-column>
          <el-table-column prop="name" label="公司名称"> </el-table-column>
          <el-table-column
            prop="address"
            label="公司英文名称
"
          >
          </el-table-column>
          <el-table-column prop="address" label="联系人"> </el-table-column>
          <el-table-column
            prop="address"
            label="联系电话
"
          >
          </el-table-column>
          <el-table-column
            prop="address"
            label="英文地址
"
          >
          </el-table-column>
          <el-table-column prop="address" label="中文地址"> </el-table-column>
          <el-table-column
            prop="address"
            label="申请时间
"
          >
          </el-table-column>
          <el-table-column prop="address" label="操作"> </el-table-column>
        </el-table>
      </div>
      <div class="fascia_foot"></div>
    </div>
    <!-- 弹窗区域 -->
    <el-dialog
      title="填写楣板信息"
      :visible.sync="dialogVisible"
      width="750px"
      :before-close="handleClose"
    >
      <div>仅标摊展位可申请楣板</div>
      <div class="dialog_titel">若系统未查询到展位号，请与工作人员确认。</div>
      <el-form
        :model="ruleForm"
        :inline="true"
        :rules="rules"
        label-position='left'
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="展位号" prop="standNum">
          <el-input
          size="mini"
            v-model="ruleForm.standNum"
            placeholder="请输入展位号"
          ></el-input>
        </el-form-item>
         <el-form-item label="公司名称">
          <el-input
           size="mini"
            v-model="ruleForm.companyName"
            placeholder="请输入公司名称"
          ></el-input>
        </el-form-item>
         <el-form-item label="联系电话" prop="personPhone">
          <el-input
           size="mini"
            v-model="ruleForm.personPhone"
            placeholder="请输入联系电话"
          ></el-input>
        </el-form-item>
         <el-form-item label="联系人" prop="personName">
          <el-input
           size="mini"
            v-model="ruleForm.personName"
            placeholder="请输入联系人"
          ></el-input>
        </el-form-item>
         <el-form-item label="地址">
          <el-input
           size="mini"
            v-model="ruleForm.companyAddress"
            placeholder="请输入地址"
          ></el-input>
        </el-form-item>
         <el-form-item label="邮编">
          <el-input
           size="mini"
            v-model="ruleForm.eamai"
            placeholder="请输入邮编"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
           size="mini"
           style="width:500px"
           type="textarea"
            v-model="ruleForm.eamai"
            placeholder="请输入备注"
          ></el-input>
        </el-form-item>
        
      </el-form>
      <div class="dialog_foot">如果查询不到展位号或者展商信息与展商信息不符，请务必与工作人员确认</div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [],
      dialogVisible: false,
      ruleForm: {},
      rules: {
          standNum:[
               { required: true, message: '请输入展位号', trigger: 'blur' },
          ],
          personPhone:[
               { required: true, message: '请输入联系电话', trigger: 'blur' },
          ],
          personName:[
               { required: true, message: '请输入联系人', trigger: 'blur' },
          ],
          eamai:[
               { required: true, message: '请输入电子邮箱', trigger: 'blur' },
          ],
      },
    };
  },
  methods: {
    handleClose() {},
  },
};
</script>
<style scoped>
.fascia_mian {
  background-color: #f2f2f2;
  padding: 20px;
  min-height: 430px;
}
.fascia_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.fascia_row {
  width: 1200px;
  background-color: #fff;
  margin: auto;
  padding: 20px;
}
.table_titel {
  font-weight: bold;
  margin: 20px 0;
}
/deep/.el-table th.el-table__cell {
  background-color: #f8fcfc !important;
  text-align: center !important;
}
/deep/.el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
  text-align: center !important;
}
.fascia_foot {
  height: 200px;
  background-color: #fff6e2;
  border: 1px solid #ffdbb8;
  margin-top: 30px;
  margin-bottom: 30px;
  line-height: 52px;
}
.dialog_titel {
    margin-bottom: 20px;
}
/deep/.el-input__inner {
    width: 230px !important;
}
.dialog_foot {
    color: #ff0000;
    margin: 20px 0;
}
</style>